<template>
  <div class="Con">
    <div
      class="Con-C"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <!--<el-upload
          class="upload-demo"
           drag
           action="https://jsonplaceholder.typicode.com/posts/"
           multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
         </el-upload>-->
      <table cellpadding="10px" cellspacing="10px">
        <tr>
          <td class="text" style="text-align: center">课程文件上传:</td>
          <td style="border-bottom: 1px rgb(2, 43, 119) solid">
            <input type="file" @change="getFiles($event)" class="inputStyle" />
          </td>
        </tr>
        <tr>
          <td class="text" style="text-align: center">
            该学期开学<span style="color: crimson">*第一周星期一</span>的时间:
          </td>
          <td style="border-bottom: 1px rgb(2, 43, 119) solid">
            <input type="date" v-model="courseTimeF" class="inputStyle" />
          </td>
        </tr>

        <tr>
          <td colspan="2">
            <button class="butStyle" style="margin-left: 10px">
              <a
                href="http://114.116.33.6:8188/api/photoload/hello"
                download
                target="_blank"
                >下载模板</a
              ></button
            ><!--模板地址-->
            <button @click="but2" class="butStyle">重新提交</button>
            <button @click="but3" class="butStyle">确认提交</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { axios1 } from "@/network";
import table2excel from "js-table2excel"; //导出模板

//import Qs from "qs";
const column = [
  {
    title: "机房",
    type: "text",
    key: "room",
  },
  {
    title: "课程性质",
    type: "text",
    key: "xz",
  },
  {
    title: "课程号",
    type: "text",
    key: "c_number",
  },
  {
    title: "课程名",
    type: "text",
    key: "c_name",
  },
  {
    title: "课程类别",
    type: "text",
    key: "c_type",
  },
  {
    title: "实验学时",
    type: "text",
    key: "c_totaltime",
  },
  {
    title: "教师",
    type: "text",
    key: "c_teacher",
  },
  {
    title: "年级",
    type: "text",
    key: "c_grade",
  },
  {
    title: "班级",
    type: "text",
    key: "c_classroom",
  },
  {
    title: "人数",
    type: "text",
    key: "student_number",
  },
  {
    title: "上课周",
    type: "text",
    key: "c_week",
  },
  {
    title: "上课第几节开始",
    type: "text",
    key: "c_time1",
  },
  {
    title: "星期几上课",
    type: "text",
    key: "c_time2",
  },
];
export default {
  data() {
    return {
      loading: false,

      courseFile: "", //课程文件
      courseTime: "", //课程开始时间
      courseTimeF: "", //没有格式化的日期

      defaultData: [
        {
          room: "102",
          xz: "必修课",
          c_number: "51000",
          c_name: "设计模式",
          c_type: "专业核心",
          c_totaltime: "32",
          c_teacher: "小明",
          c_grade: "2019级",
          c_classroom: "19级软件工程3班",
          student_number: "56",
          c_week: "1",
          c_time1: "1",
          c_time2: "周一",
        },
        //============
      ],
    };
  },
  methods: {
    getFiles(e) {
      // console.log(e.target.files);
      this.courseFile = e.target.files[0];
      //console.log(e.target.files[0])
      //console.log(this.courseFile)
    },
    but1() {
      //下载模板
      //console.log(this.courseTime.replace(/-/g,":"));
      //table2excel(column,  this.defaultData, "课程导入表格",)
      //window.open('')
    },
    but2() {
      //重新选择，其实就是刷新页面
      location.reload();
    },
    but3() {
      //提交按钮
      let data = new Date(this.courseTimeF);
      let year = data.getFullYear();
      let month = data.getMonth() + 1;
      let day = data.getDate();
      let courseTimeFormat = year + "-" + month + "-" + day;
      this.courseTime = courseTimeFormat;
      if (this.courseFile == "") {
        alert("文件不可以为空！");
      } else if (this.courseTimeF == "") {
        alert("日期不可以为空！");
      } else {
        //发送请求
        this.$confirm(
          "该操作非常重要，请再次核对一下时间:" + this.courseTime,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            this.loading = true;
            axios1({
              url: "/excel/excelImport",
              method: "post",
              headers: {
                token: this.$store.state.token, //设置token 其中K名要和后端协调好
                "Content-Type": "multipart/form-data",
              },
              data: {
                file: this.courseFile,
                date: this.courseTime,
              },
            })
              .then((res) => {
                // console.log(res);
                //this.$message({
                // message: res.data.msg,
                //  });
                this.loading = false;
                alert(res.data.msg + "     " + "该学期的课程信息导入成功！");
                location.reload(); //刷新
              })
              .catch((res) => {
                this.loading = false;
                //console.log(res)
                this.$message.error("提交失败，请检查一下你的文件格式！");
              });
          })
          .catch(() => {
            this.$message({
              message: "已取消",
              type: "warning",
            });
          });
      } //else
    },
  },
};
</script>

<style scoped>
.Con {
  width: 98%;
  height: 90%;

  margin: auto;
  margin-top: 2%;
  overflow: hidden;
}
.Con-C {
  width: 65%;
  height: 60%;
  margin: auto;

  margin-top: 10%;
  overflow: auto;
  box-shadow: 1px 1px 8px rgb(78, 78, 78);
}
.Con-C:hover {
  box-shadow: 1px 1px 10px rgb(44, 44, 44);
}
.Con-C table {
  margin: auto;
  width: 100%;
  height: 100%;
}
.text {
  font-size: 18px;
  font-weight: 600;
  color: rgb(75, 75, 75);
}
.inputStyle {
  width: 90%;
  font-size: 16px;
  padding: 4px;
  background-color: rgb(175, 174, 174);
  border: 1px solid rgb(158, 158, 158);
  color: rgb(51, 51, 51);
}
.inputStyle:hover {
  background-color: rgb(204, 204, 204);
  cursor: pointer;
}
.butStyle {
  width: 18%;
  padding: 8px;
  margin-left: 20px;
  background-color: rgb(62, 175, 250);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid beige;
  color: rgb(32, 32, 32);
}
.butStyle a {
  text-decoration: none;
  color: rgb(32, 32, 32);
}
.butStyle:hover {
  background-color: rgb(157, 213, 250);
  cursor: pointer;
}
</style>
